﻿@model IList<mBlog.ViewModels.CategoryDetail>
@{
    ViewBag.Title = "Categories";
}
<h2>
    Categories</h2>
@if (TempData["Message"] != null)
{
    <p>@TempData["Message"].ToString()</p>
}
<table id="postsTable" cellspacing="0">
    <tr>
        <th>
            Actions
        </th>
        <th>
            Title
        </th>
        <th>
            Nice Name
        </th>
        <th>
            Posts
        </th>
    </tr>
    <tbody id="categoryBody">
       @* @foreach (var category in Model)
        {
            <tr>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = category.Id })
                </td>
                <td>@category.Name
                </td>
                <td>@category.UrlName
                </td>
            </tr>
        }*@
    </tbody>
</table>
<div>
    <input id="name" type="text" name="name"/><br />
    <input id="urlName" type="text" name="urlName"/><br />
    <input id="btnAdd" type="button"/>
</div>
<script type="text/template" id="category-item">
        <td><%= Id %></td>
        <td><%= Name %></td>
        <td><%= UrlName %></td>
</script>
<script type="text/javascript" src="@Url.Content("~/Scripts/underscore.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/backbone.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/json2.js")"></script>
<script type="text/javascript">

    window.Category = Backbone.Model.extend({});
    window.Categories = Backbone.Collection.extend({
        url: 'ListJson',
        model: Category
    });

    window.CategoryView = Backbone.View.extend({
        tagName: "tr",
        template: _.template(($('#category-item').html())),

        render: function () {
            $(this.el).html(this.template(this.model.toJSON()));
            return this;
        }
    });
    
    var categories = new Categories();
    categories.fetch({
        success: function () {
            categories.each(function (category) {
                var view = new CategoryView({ model: category });
                $('#categoryBody').append(view.render().el);
            });
        }
    }
    );

    $("#btnAdd").click(function () {
        alert($('#name').val());
        categories.create({ name: $('#name').val(), urlName: $('#urlName').val() });
    });
</script>

